<template>
	<view>
		<view style="position: fixed;top: 0;left: 0;width: 100%;background-color: #ffffff;z-index: 999;">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view style="height: 80upx;"></view>
		<view v-if="!siteList.length">
			<view style="height: 300upx;"></view>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="item" v-for="(res, index) in siteList" :key="res.id" @click="toCarOrderDetail(res)">
			<view class="top" style="position: relative;" >
				<view @click.stop="delCar(res)"
					style="position: absolute;top: 0;right: 0;width: 60upx;height: 60upx;display: flex;justify-content: center;align-items: center;">
					<u-icon name="trash" size="50" class="delete-icon"></u-icon>
				</view>
				<view class="name">{{ res['驾驶员姓名'] }}</view>
				<view class="phone">{{ res['车号'] }}</view>
				
				<view class="tag">
					<text v-for="(item, index) in res.tag" :key="index"
						:class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
				</view>
			</view>
			<!-- 类型编码 1=>供应商 原料  0=>销售客户 矿粉 -->
			<!-- 毛重、皮重、净重、供货单位、收货单位、货物名称、产地。 -->
			<!-- 原料车 -->
			<view class="bottom">
				货物名称: {{res['货物名称']||noDataText}}
			</view>
			<view class="bottom">
				点击查看二维码
			</view>
		</view>

		<view style="display: flex;justify-content: center;padding-top: 100upx;width: 80%;margin-left: 10%;">
			<u-button @click="toAddSite(1)" type="primary" shape="circle" size="medium " style="width: 40%;">
				<u-icon name="plus"></u-icon>登记车辆
			</u-button>
			<u-button @click="toAddSite(2)" type="primary" shape="circle" size="medium " style="width: 40%;">
				<u-icon name="plus"></u-icon>生成二维码
			</u-button>
		</view>
		<u-modal v-model="showDelAlert" :content="delAlertContent" :show-cancel-button="true" :cancel-text="'点错了'"
			:confirm-text="'确定删除'" @confirm="delAlertConfirmHandle"></u-modal>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				siteList: [],
				showDelAlert: false,
				delAlertContent: "确定删除",
				currentItem: "",
				list: [{
					name: '未完成'
				}, {
					name: '已完成'
				}, ],
				current: 0,
				noDataText: "暂无数据"
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			toCarOrderDetail(item){
			 
				uni.setStorageSync("car-order-detail-num",item['车号'])
				uni.navigateTo({
					url:"/pages/oa/car-list/car-order-detail",
				})
			},
			change(index) {
				this.current = index;
				this.getData()
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				this.$ajax.get({
					url: "/Car/getList?status=" + this.current
				}).then(res => {
					setTimeout(() => {
						uni.hideLoading()
						this.siteList = res.data;
					}, 1000)

				})

			},
			toAddSite(type) {
				uni.navigateTo({
					url: '/pages/oa/car-list/add?type='+type
				});
			},
			delCar(item) {
				this.currentItem = item;
				this.showDelAlert = true;
			},
			delAlertConfirmHandle() {
				console.log(this.currentItem)
				this.$ajax.post({
					url: "/Car/delCar",
					data: {
						"车牌号": this.currentItem["车号"]
					}
				}).then(res => {
					if (res.data.result == '0') {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.getData()
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		padding: 40rpx 20rpx;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}

	.delete-icon {
		color: $u-type-error;
	}
</style>
